<template>
 

   <el-menu
   router
   unique-opened
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu v-for="(item, index) in this.menuobj" :key="item.id" :index="'/'+item.path">
        <template slot="title">
          <i :class="['iconfont',iconObj[item.path]]"></i>
          <span>{{ item.authName }}</span>
        </template>
        <el-menu-item v-if="item.children.length==1" v-for="(obj) in item.children":key="obj.id" :index="'/'+item.path + '/' + obj.path">
          <template slot="title"></template>
          <el-menu-item>{{ obj.authName }}</el-menu-item>
        </el-menu-item>
        <el-menu-item v-if="item.children.length>1"
           v-for="(obj,index) in item.children"
            :key="obj.id" 
            :index="'/'+item.path+'/'+obj.path">{{obj.authName}}</el-menu-item>
        </el-submenu>
      </el-submenu>
      
    </el-menu>
</template>
<script>
import local from "../../../vue_huang/src/utils/local";
import { api_menu } from "../api/menu";
export default {
  data() {
    return {
      searchobj: {},
      menuobj: [],
      iconObj:{
        users:"icon-users",
        rights:"icon-lock_fill",
        goods:"icon-shangpin",
        orders:"icon-danju",
        reports:"icon-baobiao"
      }
    }
  },
  mounted() {
    this.query();
  },
  methods: {
    async query() {
      local.get("mydb_token");
      let rst = await api_menu(this.searchobj);
      let { data } = rst;
      this.menuobj = data;
     
      // console.log(data);
    },
   
  },
  
      
};
</script>
<style lang="less" scoped>
.iconfont{
  font-size: 26px;
  margin-right: 5px;
}
</style>